<template>
  <div class="order-detail">
    <el-descriptions title="订单信息" :column="2" border>
      <el-descriptions-item label="订单ID">{{ orderData.orderId }}</el-descriptions-item>
      <el-descriptions-item label="订单状态">
        <el-tag v-if="orderData.state === 1" type="warning">待付款</el-tag>
        <el-tag v-else-if="orderData.state === 2" type="primary">待发货</el-tag>
        <el-tag v-else-if="orderData.state === 3" type="info">已发货</el-tag>
        <el-tag v-else-if="orderData.state === 4" type="success">已完成</el-tag>
        <el-tag v-else type="danger">已关闭</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="下单时间">{{ orderData.createTime }}</el-descriptions-item>
      <el-descriptions-item label="支付时间">{{ orderData.paymentTime }}</el-descriptions-item>
      <el-descriptions-item label="支付方式">
        <span v-if="orderData.paymentMode === 1">微信支付</span>
        <span v-else-if="orderData.paymentMode === 2">支付宝</span>
        <span v-else>其他</span>
      </el-descriptions-item>
      <el-descriptions-item label="商户名称">{{ orderData.shopName }}</el-descriptions-item>
      <el-descriptions-item label="交易单号">{{ orderData.transactionId }}</el-descriptions-item>
      <el-descriptions-item label="售后状态">{{ orderData.afterStateName }}</el-descriptions-item>
    </el-descriptions>

    <el-descriptions title="收货信息" :column="2" border class="mt-20">
      <el-descriptions-item label="收货人">{{ orderData.receiveName }}</el-descriptions-item>
      <el-descriptions-item label="联系电话">{{ orderData.receivePhone }}</el-descriptions-item>
      <el-descriptions-item label="收货地址" :span="2">{{ orderData.receiveAdress }}</el-descriptions-item>
      <el-descriptions-item label="备注信息">{{ orderData.remark }}</el-descriptions-item>
    </el-descriptions>

    <el-descriptions title="商品信息" :column="1" border class="mt-20">
      <el-descriptions-item>
        <el-table :data="orderData.products" border>
          <el-table-column label="商品图片" width="100">
            <template #default="scope">
              <el-image
                :src="scope.row.image"
                style="width: 60px; height: 60px"
                fit="cover"
              ></el-image>
            </template>
          </el-table-column>
          <el-table-column label="商品名称" prop="productName"></el-table-column>
          <el-table-column label="规格" width="200">
            <template #default="scope">
              <div v-for="sku in scope.row.skuDetails" :key="sku.skuName">
                {{ sku.skuName }}: {{ sku.skuValue }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="单价" width="100">
            <template #default="scope">￥{{ scope.row.productPrice }}</template>
          </el-table-column>
          <el-table-column label="数量" prop="number" width="80"></el-table-column>
          <el-table-column label="小计" width="100">
            <template #default="scope">￥{{ scope.row.productPrice * scope.row.number }}</template>
          </el-table-column>
        </el-table>
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions title="费用信息" :column="2" border class="mt-20">
      <el-descriptions-item label="商品总价">￥{{ orderData.orderPrice }}</el-descriptions-item>
      <el-descriptions-item label="运费">￥{{ orderData.logisticsPrice }}</el-descriptions-item>
      <el-descriptions-item label="订单总价">￥{{ orderData.total }}</el-descriptions-item>
    </el-descriptions>

    <div class="mt-20" style="text-align: right">
      <el-button @click="cancel">关闭</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits } from 'vue'

const props = defineProps({
  detailRow: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['cancel'])

// 模拟订单详情数据，实际应通过API获取
const orderData = ref(props.detailRow || {})

const cancel = () => {
  emit('cancel')
}
</script>

<style lang="scss" scoped>
.order-detail {
  .mt-20 {
    margin-top: 20px;
  }
}
</style>